import React, {Component} from 'react'
import {StyleSheet, View, Image, Text, SafeAreaView} from 'react-native'
import ScreenUtils from "../../utils/ScreenUtils";
import Color from "../../utils/Color";
import Ripple from "react-native-material-ripple";

const headBg = ScreenUtils.isDarkTheme() ? Color.darkBg : '#fff'
const titleColor = ScreenUtils.isDarkTheme() ? '#12C59E' : '#608FFF'

const androidOS = Platform.OS === 'android'
const IOS = Platform.OS === 'ios'

const appBarPaddingTop = 0;
const appBarHeight = IOS ? 44 : 56 + appBarPaddingTop;

export default class header extends Component {
    constructor(props) {
        super(props);
    }

    // static propTypes={
    //     label: PropTypes.string,
    //     goBack: PropTypes.func
    // };

    render() {
        return (
            <SafeAreaView style={styles.head}>
                <View style={styles.toolbarStyle}>
                    <Ripple style={styles.leftRipple} onPress={() => this.props.goBack()}>
                        <Image source={require('../../../source/image/arrow-left.png')} style={styles.arrowRight}/>
                    </Ripple>
                    <Text style={styles.labelText}>{this.props.label}</Text>
                </View>
            </SafeAreaView>
        )
    }

}

const styles = StyleSheet.create({
    head: {
        backgroundColor: headBg,
        elevation: 5
    },
    toolbarStyle: {
        backgroundColor: headBg,
        height: appBarHeight,
        paddingTop: appBarPaddingTop,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    leftRipple: {
        width: 44,
        height: 44,
        borderRadius: 22,
        alignItems: 'flex-start',
        position: 'absolute',
        left: 10,
        top: appBarHeight / 2 - 11
    },
    arrowRight: {
        width: 15,
        height: 15,
    },
    labelText: {
        color: titleColor,
        fontSize: ScreenUtils.setFont(18),
        fontWeight: 'bold'
    }
})
